import _MyLoading from './MyLoading.vue'

export default {
    install (Vue) {
        let MyLoading = null
        function show (props,callback) {
            if (!MyLoading) {

                // 第一步：生成组件实例
                // 【1】写法一：直接使用extend去解析组件模板；适用于组件不需要传递参数的情况（如：loading）
                // vue.etend: 传入一个组件对象，返回一个组件实例
                // MyLoading = Vue.extend(_MyLoading);

                // 【2】写法二：使用render函数+extend去解析组件模板；适用于组件需要传递参数的情况（如：messageBox，Toast等）
                // render函数：返回的参数是Vnode（即虚拟节点，也就是我们要渲染的节点）；
                // ????这点还没搞清楚为啥么extend中可以使用render函数????
                Vue.component('MyLoading', _MyLoading)
        
                MyLoading = Vue.extend({
                    render (h) {
                        return h('MyLoading', {
                            props,
                            scopedSlots: {
                                default: () => createElement('span', 'slot哈西啊哈')
                            }
            
                        })
                    }
                });

                // 第二步：由组件构造器生成新的组件并挂载到div上
                this.vm = new MyLoading().$mount();
                
                // 第三步：将组件插入到页面中
                document.body.appendChild(this.vm.$el);

                // 第四步：回调
                callback && callback();
            }
        }
        function hide (callback) {
            if (MyLoading) {
                // 将组件从页面中移除
                document.body.removeChild(this.vm.$el);
                MyLoading = null;
                this.vm = null;
                // 回调
                callback && callback();
            }
        }
 
        Vue.prototype.$MyLoading = {
            show,
            hide
        }
    }
};